<template>
  <div class='gallery-page' :style="{ width: galleryPageWidth + 'px', height: galleeHeight + 'px' }">
    <photo-frame class="gallery-page-item" v-for="item in galleryPageItems" 
      :photo-frame-width="pageItemWidth" 
      :photo-frame-height="pageItemHeight"
      :photo-frame-src="item.photoSrc" 
      :photo-frame-avatar="item.avatarSrc"
      :style="{ top: getPageItemTop($index) + 'px', left: getPageItemLeft($index) + 'px'}" track-by="$index">
    </photo-frame>
  </div>
</template>

<script type="text/babel">
  import PhotoFrame from './PhotoFrame'
  export default {
    data () {
      var itemWidth = this.galleryPageItemWidth
      var columnNumber = this.galleryPageColumnNumber
      if (!itemWidth) {
        var galleryWidth = this.galleryPageWidth
        var hGap = this.galleryPageItemHorGap
        itemWidth = (galleryWidth - hGap * (columnNumber - 1)) / columnNumber
      }
      var itemHeight = this.galleryPageItemHeight
      if (!itemHeight) {
        var items = this.galleryPageItems
        var count = items.length
        var rowNumber = Math.ceil((count - 1) / columnNumber)
        itemHeight = (this.galleryPageHeight - this.galleryPageItemVerGap) / rowNumber
      }
      return {
        pageItemWidth: itemWidth,
        pageItemHeight: itemHeight
      }
    },
    props: {
      galleryPageWidth: {
        type: Number
      },
      galleryPageHeight: {
        type: Number
      },
      galleryPageItems: {
        type: Array,
        required: true
      },
      galleryPageItemVerGap: {
        type: Number,
        default: 8
      },
      galleryPageItemHorGap: {
        type: Number,
        default: 12
      },
      galleryPageColumnNumber: {
        type: Number,
        default: 4
      },
      galleryPageItemWidth: {
        type: Number
      },
      galleryPageItemHeight: {
        type: Number
      }
    },
    methods: {
      getPageItemLeft (position) {
        var column = parseInt(position % this.galleryPageColumnNumber)
        var left = column * (this.pageItemWidth + this.galleryPageItemHorGap)
        return left
      },
      getPageItemTop (position) {
        var row = parseInt(position / this.galleryPageColumnNumber)
        var isEvenColumn = (position + 1) % 2 === 0
        var top = row * (this.pageItemHeight + this.galleryPageItemVerGap)
        if (isEvenColumn) {
          top += 40
        }
        return top
      }
    },
    components: {
      PhotoFrame
    }
  }
</script>

<style scoped>
  .gallery-page {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 150px;
    margin-left: 30px;
  }

  .gallery-page .gallery-page-item {
    display: inline-block;
    position: absolute;
  }
</style>